import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaSelect, WeaPopoverHrm, WeaLocaleProvider } from 'ecCom';
import ViewWeekMonth from '../../../public/viewweekmonth/ViewWeekMonth';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject('planViewStore')
@observer
export default class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.store = this.props.planViewStore;
    }
    render() {
        const { tabSelectKey, tabDatas, enddate, resourceid, resourcename, loading, auditList, planstatus, planstatusname, locationkey, year, type1, type2, planname, yearDatas, monthWeekSelectComDisplayKey } = this.store
        const nameLink = this.getNameALink(resourceid, resourcename)
        if(type1=='1' && Number(type2) >12){
            this.store.setValue("type2",new Date().getMonth()+1)
            this.store.setValue("locationkey",new Date().getTime()*Number(Math.random().toFixed(2)))
        }
        return (
            <div className="date-select-area">
                {/* 头部日期选择左侧 日期和标题等 */}
                {tabDatas && tabDatas.length > 0 && !loading && 
                    <div className="date-select-left">
                        <span className="date-select-coms">
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@a79vcw`}
                                options={yearDatas}
                                value={year}
                                viewAttr={2}
                                onChange={e => {
                                    this.onYearSelectChange(e);
                                }}
                            />
                            <ViewWeekMonth ecId={`${this && this.props && this.props.ecId || ''}_ViewWeekMonth@9qs5t1`}
                                className="week-month-com"
                                display={monthWeekSelectComDisplayKey}
                                locationkey={locationkey}
                                year={parseInt(year)}
                                isMonth={tabSelectKey == "1"}
                                doClose={this.dateSelectCallBack}
                                currentValue={parseInt(type2)}
                                isshowdate={tabSelectKey != '1'}
                                onDateChange={this.onViewDateChange}
                            />
                        </span>
                        <span className="date-select-title" >
                            {nameLink ? nameLink : ''}
                            {resourcename ? getLabel('509008', ' 的工作计划报告') : ''}
                        </span>
                    </div>
                }
                {/* 头部日期选择右侧 标签和截止日期等 */}
                <div className="date-select-right">
                    {(planstatus == '')
                        ? (enddate ? <div className="tag-area"><div className="right-area">{getLabel('22326', '截止时间：') + ": " + enddate}</div> </div> : '')
                        : <div className="tag-area">
                            <div className="right-area">
                                {' '}
                                {this.getStatusTag(planstatus, planstatusname[planstatus])}
                                {
                                    auditList && auditList.length > 0 && <span>
                                        {getLabel('129864', '待审批人') + ":"}
                                        {auditList.map(a => {
                                            return <span style={{ marginRight: "3px" }}>{this.getNameALink(a.id, a.name)}</span>
                                        })}
                                        {' '}
                                    </span>
                                }
                                {planstatus != '3' && enddate && getLabel('22326', '截止时间：') + ": " + enddate}
                            </div>
                        </div>}
                </div>

            </div>
        );
    }
    componentWillMount() {
        const yearDatas = this.store.getYearSelectoption()
    }

    onYearSelectChange = e => {
        this.store.onDateChange("year", e)
    };

    dateSelectCallBack = val => {
        this.store.onDateChange("type2", val);
    };

    getStatusTag = (planstatus = 0, planstatusname) => {
        let backgroundColor = '';
        switch (planstatus) {
            case '0': //草稿
                backgroundColor = '#EB9B53';
                break;
            case '1': //审批
                backgroundColor = '#5388EB';
                break;
            case '2': //退回
                backgroundColor = '#B916E8';
                break;
            case '3': //完成
                backgroundColor = '#49D732';
                break;
            case '6': //过期
                backgroundColor = '#5F0E03';
                break;
            default:
                backgroundColor = '#EB9B53';
                break;
        }

        return (
            <div className="status-tag" style={{ backgroundColor: backgroundColor }}>
                {planstatusname}
            </div>
        );
    };

    getNameALink = (resourceid, resourcename) => {
        let href = 'javaScript:openhrm(' + resourceid + ');';
        return (
            <a href={href} onClick={e => window.pointerXY(e)} class="autoWrap">
                {resourcename}
            </a>
        );
    };
    onViewDateChange = (totalWeek) => {
        const { tabSelectKey, year, type1, type2 } = this.store
        if (tabSelectKey == '2') {
            if (Number(type2) > totalWeek) {
                this.store.onDateChange('type2', totalWeek);
            }
        }
    }

}

